Question

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

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

我要做的是根据完整句子的数量动态地将p标签放置在database.text中。因此，例如，在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错误。

关于如何实现或是否可以实现的任何想法？

Answer 1

Voila！

基于以下来源的回复： Split string into sentences in javascript 和 Split array into chunks

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

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/

如何将HTML标签插入传入的动态文本中

1 个答案: