用 <p> 标签替换 textarea 中的空行并将其显示为 HTML 有效代码

Posted

技术标签:

【中文标题】用 <p> 标签替换 textarea 中的空行并将其显示为 HTML 有效代码【英文标题】:Replace empty lines with <p> tags in textarea and show it as HTML valid code 【发布时间】:2021-02-01 07:02:41 【问题描述】:

有一个文本区域,有人可以在其中编写文本。文本可能在多行,我想检查文本中的空白行并用&lt;p&gt;标签替换它们,所以2个空白行之间的文本应该用&lt;p&gt;标签包裹。

到目前为止,它正在检查空行并在有空行时返回布尔值。

function getInputValue() 
  // Selecting the input element and get its value
  var inputVal = document.getElementById('w3review').value;

  var inTxt = document.getElementById('w3review').value;
  console.log('intx: ', inTxt);

  if (inTxt.match(/^\s*\n/gm)) 
    console.log('yes, there is a blank line');
   else 
    console.log('nope. no blank lines');
  

  document.getElementById('output').innerhtml = inputVal;
<!DOCTYPE html>
<html>
  <body>
    <h1>Enter text:</h1>
    <textarea id="w3review" name="w3review" rows="6" cols="15"> </textarea>
    <input type="submit" value="Convert to HTML" onclick="getInputValue()" />
    <label>HTML output:</label>
    <textarea id="output" name="w3review" rows="6" cols="15"> </textarea>
    <script src="script.js"></script>
  </body>
</html>

有没有办法用

替换空行

标记,并在输出中显示为 HTML,而不是用

显示

但是通过 HTML 解析呢?

【问题讨论】:

【参考方案1】:

编辑 - 更新以反映 cmets 中所述的 OP 要求

只需在换行符处拆分 textarea 值,然后使用包含在 p 元素标签中的部分构建一个字符串 - 然后将该字符串作为输出 div 的 innerHTML 插入。您不能在 textarea 中包含 html - 所以唯一的方法是创建元素 - 如果您检查输出 div - 您将看到 textarea 输入的每个部分都包含在 &lt;p&gt;...&lt;/p&gt; 标签中 - 带有 emty 行在 textarea 中转换为输出中的空 p 元素。

function getInputValue() 
  // Selecting the input element and get its value
  var inputVal = document.getElementById('w3review').value;
  
  
  const newTextPortions = inputVal.split('\n');
    
  newTextStr = ''
    newTextPortions.forEach(function(portion)
     newTextStr += "<p>" + portion + "</p>"
  )
  

  document.getElementById('output').innerHTML = newTextStr;
    <label>Enter text</label>
    <textarea id="w3review" name="w3review" rows="4" cols="15"> </textarea>
    <input type="submit" value="Convert to HTML" onclick="getInputValue()" />
    <div id="output"></div>

【讨论】:

可能我不清楚,我不想在结果中显示

文本值,我想像段落一样显示它,例如如果是 显示斜体文本不显示实际的 文本

哦 - 我明白了 - 不,你不能在 textare 中这样做 - 你需要将输出 textarea 交换为 div。 我认为您的代码为所有新行添加了一个

标签,并且应该只为空行添加标签

@LeoMessi - 嗨 - 我最初是这样做的 - 但在你发表评论后改变了它 - 以 eitehr 方式 - 它演示了功能。我对这些要求不满意,所以把我认为需要的东西放进去——但我愿意把它作为一个简单的参考,说明如何将 textarea 的值转移到有效的 html 元素。【参考方案2】:

如果您更喜欢使用 HTML 而不是 textarea(就像您 can't have HTML in a textarea),那么您可以将 HTML 写入 div 中:

function getInputValue() 
  // Selecting the input element and get its value
  var inputVal = document.getElementById('w3review').value;

  var inTxt = document.getElementById('w3review').value;
  console.log('intx: ', inTxt);

  if (inTxt.match(/^\s*\n/gm)) 
    console.log('yes, there is a blank line');
   else 
    console.log('nope. no blank lines');
  

  document.getElementById('output').innerHTML = '<p>' + inTxt.replaceAll(/(\n+)/g, '</p><p>') + '</p>';
<!DOCTYPE html>
<html>

<body>
  <h1>Enter text:</h1>
  <textarea id="w3review" name="w3review" rows="6" cols="15"> </textarea>
  <input type="submit" value="Convert to HTML" onclick="getInputValue()" />
  <label>HTML output:</label>
  <div id="output"></div>
  <script src="script.js"></script>
</body>

</html>

【讨论】:

所以如果textarea中可以有HTML,是否可以将结果文本显示为HTML? 是的,只是不在另一个文本区域中,因为那些是为text 准备的。【参考方案3】:

简答:

使用replace insted of if

     function getInputValue() 
  // Selecting the input element and get its value
  var inputVal = document.getElementById('w3review').value;

  var inTxt = document.getElementById('w3review').value;
  console.log('intx: ', inTxt);

  inTxt = inTxt.replace(/(\r\n|\n|\r)/gm," ");
  inTxt = inTxt.replace("  "," ");


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

长答案(最佳实践):

创建一个函数来清理输入,创建“实际”P-tags 并将它们附加到 DOM 和/或在文本字段中显示渲染它们。 您不能在文本字段中显示丰富的内容,但一种方法是创建一个假文本字段 -> Format text in a <textarea>?

    <!DOCTYPE html>
    <html>
      <body>
        <h1>Enter text:</h1>
        <textarea id="w3review" name="w3review" rows="6" cols="15"> </textarea>
        <input type="submit" value="Convert to HTML" onclick="getInputValue()" />
        <label>HTML output:</label>
        <textarea id="output" name="w3review" rows="6" cols="15"> </textarea>
        <script src="script.js"></script>
        <div id="target"> </div>
      </body>
      <script>
    
      function getInputValue() 
      // Selecting the input element and get its value
      var inputVal = document.getElementById('w3review').value;
    
      var inTxt = document.getElementById('w3review').value;
      console.log('intx: ', inTxt);
    
      inTxt = inTxt.replace(/(\r\n|\n|\r)/gm,",");
      let textArray = []
      let sanitizedArray = []
    
      textArray = inTxt.split(",")
      console.log(textArray)
    
      //Sanitize the array
      textArray.map((data, index)=> data === ""? console.log(`Index $index is empty don't push`): sanitizedArray.push(data))
      console.log(sanitizedArray)
    
      function createValidHtml(content)
        const target = document.getElementById("target")
        let pTag = document.createElement("p")
        pTag.innerHTML = content
        target.appendChild(pTag)
      
    
      sanitizedArray.map(data => createValidHtml(data))

      //Set as value of output-textfield (if necessary)
      const target = document.getElementById("target")
      document.getElementById('output').innerHTML = target.innerHTML
    
      </script>
    </html>

【讨论】:

以上是关于用 <p> 标签替换 textarea 中的空行并将其显示为 HTML 有效代码的主要内容,如果未能解决你的问题,请参考以下文章

用 <p> 段落和 <br /> 标签替换换行符

用 <p> 标签和类替换标题 (<h1>, <h2> ...) 标签

利用正则表达式替换img标签的问题

textarea中的换行符怎样显示在网页中

vue textarea空格和换行处理

怎么用js 把<p> </p> 替换为空 html = html.replace('<p> </p>'