console 命令行工具 X clear

console

const showDiv = document.getElementById('showDiv');
const t = document.getElementById('t');
t.addEventListener('input', (e) => {
    let text = e.target.value;

    showDiv.innerHTML = text;
    console.log(text, text.length)
})

function parseTextToRows({el} = {}){
    if(!el) return []

}






    function getTextWidth(text, font) {
  // 创建一个隐藏的Canvas元素
  const canvas = document.createElement('canvas');
  canvas.setAttribute('width', 100);
  const ctx = canvas.getContext('2d');

  // 设置字体样式
  ctx.font = font || '18px Arial'; // 默认字体样式为18px Arial

  // 使用measureText方法获取文本的宽度
  const metrics = ctx.measureText(text);
  return metrics.width;
}
    // 使用示例
    const text = "Hello, World!";
    const font = "18px Arial"; // 指定字体样式
    const width = getTextWidth(text, font);

    console.log(`Text width: ${width}px`);




(()=>{
    function isPartOfWord(text, index) {
  // 匹配单词边界
  const wordBoundaryRegex = /\b\w/g;
  let match;
  let wordStart = -1;
  let wordEnd = -1;

  // 遍历所有单词边界
  while ((match = wordBoundaryRegex.exec(text)) !== null) {
    const start = match.index;
    const end = start + match[0].length;

    if (index >= start && index < end) {
      return true; // 当前索引在单词范围内
    }
  }
  return false; // 当前索引不在任何单词范围内
}

// 使用示例
const text = "Hello, World!";
console.log(isPartOfWord(text, 0)); // true (H is part of a word)
console.log(isPartOfWord(text, 7)); // false (space is not part of a word)
})()

(()=>{
function isPartOfWord(text, index) {
  let inWord = false;

  for (let i = 0; i <= index; i++) {
    if (/[a-zA-Z0-9]/.test(text[i])) {
      inWord = true; // 当前字符是字母或数字，属于单词
    } else {
      inWord = false; // 当前字符不是字母或数字，不属于单词
    }
  }
  return inWord;
}

// 使用示例
const text = "Hello, World!";
console.log(isPartOfWord(text, 0)); // true (H is part of a word)
console.log(isPartOfWord(text, 7)); // false (space is not part of a word)
})()


/**
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Is Part of Word</title>
</head>
<body>
  <div id="textContainer">Hello, World!</div>
  <script>
    function isPartOfWord(element, index) {
      const text = element.textContent;
      const range = document.createRange();
      range.selectNodeContents(element);

      // 移动范围到目标索引
      range.setStart(range.startContainer, index);
      range.setEnd(range.startContainer, index + 1);

      // 获取当前范围的文本
      const currentChar = range.toString();

      // 检查前后字符是否是字母或数字
      const prevChar = index > 0 ? text[index - 1] : '';
      const nextChar = index < text.length - 1 ? text[index + 1] : '';

      return /[a-zA-Z0-9]/.test(currentChar) && /[a-zA-Z0-9]/.test(prevChar + nextChar);
    }

    const container = document.getElementById('textContainer');
    const text = container.textContent;
    console.log(isPartOfWord(container, 0)); // true (H is part of a word)
    console.log(isPartOfWord(container, 7)); // false (space is not part of a word)
  </script>
</body>
</html>


 
 */

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>解析文本</title>
  <!-- 添加依赖 -->
  <!-- 依赖三个包 -->
  <!-- 下载引入 -->
  <!-- CDN引入 -->
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

  <!-- babel -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  <!-- npm下载引入(脚手架) -->
</head>

<body>
  <div id="root"></div>
  <div id="app"></div>
  <button id="parseButton">解析文本</button>
  <textarea id="t">  </textarea>
  <div id="showDiv"> </div>
  <script type="text/babel"></script>
</body>

</html>

body {
  background: pink;
}
textarea {
  width: 300px;
  height: 300px;
  font-size: 18px;
}
#showDiv {
  background: #ccc;
  white-space: pre-wrap;
  position: absolute;
  bottom: 20px;
  font-size: 18px;
}