Question

我正在尝试用破折号将短语连字（由音节分隔）。我发现this page的连字非常好，但是带有斜线，在每个单词后面加上斜线，并在每个单词后的每个音节的数量。我injected到页面上的一些code以从结果中获取文本，并将“ /”替换为“”，然后将“ /”替换为“-”，然后将其打印在textarea上，但每隔几个字我都会收到一条“ = x音节”消息，我需要没有它的消息。我看到这些消息在strong标记内，所以我想知道是否有一种方法可以从结果中获取所有文本，除了strong标记内的文本。

Tl; dr ：我需要获得

你好，世界！你好，世界！你好，世界！

从这里：

<div id="text">
 <div>
  Hello, world!
 </div>
  Hello, world!
 <div>
  Hello, world!
 </div>
 <span>
  Not this
 </span>
</div>

Answer 1

您正尝试通过注入使用类似于API提供程序的页面。您可能会成功实现所需的目标，但是正确的方法是通过搜索解决方案，创建一些逻辑然后编写一些代码来实现所需的目标来实现它。

如果您只想提取文本并排除没有空格的某些标签，请使用DOM querySelectorAll来匹配所需内容，并使用诸如{{1}这样的选择器排除不想要的内容}，然后映射#text :not(span)，最后使用正则表达式textContent删除空格：

replace(/\s/g, '')

var result = [...document.querySelectorAll('#text :not(span)')]
  .map(e => e.textContent)
  .join()
  .replace(/\s/g, '');

console.log(result);

现在，如果要创建自己的软件包，则会发现带有compromise插件的非常受欢迎的syllables软件包，您可以像这样使用：

<div id="text">
 <div>
  Hello, world!
 </div>  
 <div>
  Hello, world!
 </div>
 <div>
  Hello, world!
 </div>
 
 <span>
  Not this
 </span>
</div>

nlp.extend(compromiseSyllables);

function convert() {
  // Get textarea text
  const text = document.getElementById('text').value;

  // Create npl document with the text
  const doc = nlp(text);

  // Get syllables array using npl syllables plugin
  const syllables = doc.terms().syllables();

  // Create the wanted string result using the syllables array
  const result = syllables.map(({ syllables }) => syllables.join('-')).join(' ');

  // Output the result
  document.getElementById('result').textContent = result;
}

convert();

document.getElementById('convert').onclick = convert;

// result =>
// as se-cond ar-gu-ment e-mo-ji-fy takes an han-dler to par-se un-known e-mo-jis

Answer 2

普通的JS / DOM API样式：

const nodes = document.getElementById("text").childNodes;
let buffer = [];

for (let i = 0; i < nodes.length; i++) {
    let node = nodes[i];

    if ((node.nodeName !== "SPAN") && node.textContent.trim().length !== 0) {
        buffer.push(node.textContent.trim()); 
    }
}

let result = buffer.join("");

console.log(result);

<div id="text">
 <div>
  Hello, world!
 </div>
  Hello, world!
 <div>
  Hello, world!
 </div>
 <span>
  Not this
 </span>
</div>

Answer 3

使用VanillaJS：

var clonetext = document.getElementById("text").cloneNode(true);

clonetext.querySelectorAll("*:not(div)").forEach(function(v){v.remove()});

console.log(clonetext.innerText);

<div id="text">
 <div>
  Hello, world!
 </div>
  Hello, world!
 <div>
  Hello, world!
 </div>
 <span>
  Not this
 </span>
 <a>Not this</a>
</div>

使用cloneNode函数并从#text创建新的DOMCollection

删除除divs之外的所有孩子

获取#text的innerText

如何获取元素的文本，不包括某些标签

3 个答案: