-1

我有一些来自动态生成的数据库的传入文本并将其放入 div 中，我将其命名为：

<div id="dynamicText"> ${dataBase.text} </div>

我想要做的是根据完整句子的数量在 database.text 中动态放置 p 标签。例如，在 database.text 的第一行之前，我们有一个起始 p 标签，然后在第 8 个完整的句子之后，我们有一个结束 p 标签。然后每 8 句重复一次。

这是我用来计算出现句子数量的表达式：

/\w[.?!](\s|$)/g

最终，这是我迄今为止在 ajax 请求中的简化代码：

/* The reg expression for counting sentences */

 let re;
 re = /\w[.?!](\s|$)/g

const dataBase = JSON.parse(this.responseText);

/* Pull the text out the database object for counting sentences */
const dataBaseString = dataBase.text;


/* Count the number of senteces */
let count = (dataBaseString.match(re) || []).length;


const output = ` 
   <div class="ajaxText">
      ${dataBase.text }
   </div>
`;


document.getElementById('dynamicText').innerHTML = output;

我计算句子没有问题，我遇到的障碍是将 p 标签放入传入的文本中。我尝试使用insertAdjacentHTML()，但出现Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null错误。

关于如何做到这一点的任何想法，或者是否可以做到这一点？

4

1 回答 1

0

瞧！

基于以下回复： 将字符串拆分为 javascript 中的句子 和 将数组拆分为块

我创建了一个我认为可行的解决方案。我将整个字符串（ database.text ）拆分为短语数组，然后创建 8 个短语的块，最后将它们附加到包装器中。

const wrapper = document.querySelector('.wrapper')

const text = `... your stringified content`

const array = text.replace(/([.?!])\s*(?=[A-Z])/g, "$1|").split("|")

function chunker(array, chunkSize) {
  console.log(array)
  return [].concat.apply([],
    array.map(function(el, i) {
      return i % chunkSize ? [] : [array.slice(i, i + chunkSize)];
    })
  );
}

const paragraphs = chunker(array, 8)

paragraphs.forEach((el) => {
    const p = document.createElement('p')
  p.innerText = el
  wrapper.append(p)
})

这是我为您准备的 JSfiddle：https ://jsfiddle.net/mkbctrlll/d5r38whL/35/

于 2019-04-27T18:32:24.080 回答