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

我将首先创建temp 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');

然后，您需要在doc内递归下降到HTMLDocument childNode对象中。

类似地，您可以使用客户端javascript网络抓取工具（例如artoo.js）来检查节点。

对于不在实际标记中的字符串，例如“：或”，则需要先将其包装在<p>标记中，或者先包装一些东西。

Answer 4

基于以下答案：https://stackoverflow.com/a/2579869/1921385，您可以递归地迭代每个节点，并将文本部分添加到数组中。 EG：

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;

接下来，“按摩”内容，以确保所有“非单词”字符与单词分开，而不会丢失（两端的空格处理单词前后的非单词字符）：

var result = pContent.replace(/(\W+)/g, " $0 ");

接下来，修剪所有前导或尾随空格，以避免在数组的开头和结尾处出现emty元素：

var result = result.trim();

然后，最后，将更新的字符串按空格分隔：

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, " $0 ").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 使“非单词”检查贪婪（捕获所有所有非单词字符）并能够捕获非单词字符组（例如“ !!!”）。

Answer 6

为了使此代码段中的代码正常工作，在目标HTML周围包裹了<div>。
用.textContent提取文本
使用.replace()传递正则表达式/(\s+|\n)/g进行清理，该表达式将用单个空格替换任意数量的相邻空格或换行符。字符串的两端均为.trim()。
然后在每个空格处.split()字符串。

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创建单个单词的数组？

6 个答案: