有没有办法通过 JavaScript 从 innerText 创建一个单独的单词数组？

Question

我有一个看起来像这样的字符串：

<strong>word</strong>: or <em>word</em> or <p><strong>word</strong>: this is a sentence</p> etc...

我正在尝试将每个字符串解析为一个没有 html 元素的数组。
例如字符串：

<strong>word</strong>

最终应该是一个如下所示的数组：

['word', ':']

字符串：

<p><strong>word</strong>: this is a sentence</p>

最终应该是一个如下所示的数组：

['word', ':', 'this', 'is', 'a', 'sentence']

是否可以通过 Javascript 执行此操作？我下面的代码创建了一个由单个字符组成的数组，而不是用空格分隔的单词。

//w = the string I want to parse
var p = document.querySelector("p").innerText;

var result = p.split(' ').map(function(w) {
  if (w === '')
    return w;
  else {
    var tempDivElement = document.createElement("div");
    tempDivElement.innerHTML = w;

    const wordArr = Array.from(tempDivElement.textContent);
    return wordArr;
  }
});
console.log(result)

<p><strong>word</strong>: this is a sentence</p>

Answer 1

我会先制作临时文件 div 并提取内部文本。然后使用 match() 查找单词（注意 \w 匹配字母、数字和下划线）。这会将 : 之类的标点符号视为单独的单词，这似乎是您想要的。

p = '<strong>word</strong>: or <em>word</em> or <p><strong>word</strong>: this is a sentence</p>'

var tempDivElement = document.createElement("div");
tempDivElement.innerHTML = p;

let t = tempDivElement.innerText
let words = t.match(/\w+|\S/g)
console.log(words)

如果您只想要单词，请仅匹配 \w:

p = '<strong>word</strong>: or <em>word</em> or <p><strong>word</strong>: this is a sentence</p>'

var tempDivElement = document.createElement("div");
tempDivElement.innerHTML = p;

let t = tempDivElement.innerText
let words = t.match(/\w+/g)
console.log(words)

Answer 2

您可以通过创建临时 HTML 元素然后简单地获取它的 textContent.

来做到这一点

示例：

/*to get words only seprated by space*/
function myFunction1(htmlString) {
  var div = document.createElement('div');
  div.innerHTML = htmlString;
  return (div.textContent || div.innerText).toString().split(" ");
};

/* to get words seprated by space as well as HTML tags */
function myFunction2(htmlString) {
  var div = document.createElement('div');
  div.innerHTML = htmlString;
  var children = div.querySelectorAll('*');
  for (var i = 0; i < children.length; i++) {
    if (children[i].textContent)
      children[i].textContent += ' ';
    else
      children[i].innerText += ' ';
  }
  return (div.textContent || div.innerText).toString().split(" ");
};

console.log('function 1 result:');
console.log(myFunction1("<strong>word</strong>: or <em>word</em> or <p><strong>word</strong>: this is a sentence</p>etc..."));
console.log('function 2 result: ');
console.log(myFunction2("<strong>word</strong>: or <em>word</em> or <p><strong>word</strong>: this is a sentence</p>etc..."));

Answer 3

一种可能的方法是使用构建 DOMParser 方法：

var string = '<strong>word</strong>: or <em>word</em> or <p><strong>word</strong>: this is a sentence</p> etc...';
var doc = new DOMParser().parseFromString(string, 'text/html');

然后您需要通过 childNode 递归下降到 doc HTMLDocument 对象。

同样，您可以使用 client-side javascript 网络抓取工具（例如 artoo.js）并以这种方式检查节点。

至于不在实际标签中的字符串，例如“：或”，您需要先将字符串包装在 <p> 标签或其他内容中。

Answer 4

基于此答案：您可以递归迭代每个节点并将文本部分添加到数组中。例如：

var items = [];
var elem = document.querySelector("div");
function getText(node) {
    // recurse into each child node
    if (node.hasChildNodes()) {
        node.childNodes.forEach(getText);
    } else if (node.nodeType === Node.TEXT_NODE) {
        const text = node.textContent.trim();
        if (text) {
            var words = text.split(" ");
            words.forEach(function(word) {
              items.push(word);
            });
        }
    }
}
//
getText(elem);
console.log(items);

<div><strong>word</strong>: or <em>word</em> or <p><strong>word</strong>: this is a sentence</p></div>

Answer 5

"word" 值后的冒号是棘手的部分，但是使用 textContent 属性和一些字符串操作，您可以设置一个可以 split() 的字符串您要查找的数组。

首先收集要解析的元素：

var p = document.querySelector("p");

接下来，使用 "textContent" 属性从其中获取文本内容：

var pContent = p.textContent;

接下来，"massage" 内容以确保任何 "non-word" 个字符与单词分开，不会丢失（两端的 space 句柄 non-word单词前后字符):

var result = pContent.replace(/(\W+)/g, " [=12=] ");

接下来，trim 任何前导或尾随 spaces，以避免数组开头和结尾的元素为空：

var result = result.trim();

最后，将更新后的字符串分成白色块space:

var result = result.split(/\s+/);

但是，让这变得更好的是，如果您愿意，您实际上可以在一行代码中完成所有这些操作，如下面的浓缩解决方案所示：

var element1 = document.querySelector("#element1");
var element2 = document.querySelector("#element2");
var element3 = document.querySelector("#element3");

function elementTextToArray(element) {
  return element.textContent.replace(/(\W+)/g, " [=15=] ").trim().split(/\s+/);
}

console.log(elementTextToArray(element1));
console.log(elementTextToArray(element2));
console.log(elementTextToArray(element3));

<p id="element1"><strong>word</strong></p>
<p id="element2"><strong>word</strong>: this is a sentence</p>
<p id="element3"><strong>word</strong>: this is a sentence <em>with multiple levels of <strong>depth</strong> in it!!!</em></p>

更新 #1 使 "non-word" 检查贪婪（捕获所有 non-word 个字符）并能够捕获 non-word 个字符组（如“!!!”） .

Answer 6

为了使其在此代码段中正常工作，<div> 环绕目标 HTML。
用.textContent
通过 .replace() 传递正则表达式 /(\s+|\n)/g 来清理它，它将用单个 space 替换任意数量的相邻 space 或换行符。字符串两端都是.trim().
然后 .split() 每个 space 处的字符串。

let text = document.querySelector('.content').textContent;
let clean = text.replace(/(\s+|\n)/g, ' ').trim();
let array = clean.split(' ');
console.log(array);

<div class='content'>
  <strong>word</strong>: or <em>word</em> or
  <p><strong>word</strong>: this is a sentence</p> etc...
</div>

有没有办法通过 JavaScript 从 innerText 创建一个单独的单词数组？

Is there a way to create an array of individual words from innerText via JavaScript?

javascript

arrays

innertext