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

Question

我有一些来自数据库的动态生成的传入文本，它们被放入 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 错误。

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

Answer 1

瞧！

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

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

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

const text = `... your stringified content`

const array = text.replace(/([.?!])\s*(?=[A-Z])/g, "|").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 标签插入传入的动态文本中

How can I insert Html tags into incoming dynamic text

html

javascript

css

dynamic-text