將空行替換為<p> textarea 中的標簽並將其顯示為 HTML 有效代碼

Question

有一個文本區域，有人可以在其中編寫文本。 文本可能在多行上，我想檢查文本中的空白行並將它們替換為

標簽，因此應將 2 個空行之間的文本換行

標簽。

到目前為止，它正在檢查空行並在有空行時返回一個布爾值。

 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解析呢？

Answer 1

編輯 - 更新以反映 OP 的要求，如評論中所述

只需在換行符處拆分 textarea 值，然后構建一個包含在p元素標簽中的部分的字符串 - 然后將該字符串作為輸出 div 的 innerHTML 插入。 你不能在 textarea 中包含 html - 所以唯一的方法是創建元素 - 如果你檢查輸出 div - 你會看到 textarea 輸入的每個部分都包含在<p>...</p>標簽 - textarea 中的 emty 行轉換為輸出中的空 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>

Answer 2

簡短的回答：

使用replace插入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 標簽並將它們附加到 DOM 和/或在文本字段中顯示渲染它們。 您不能在文本字段中顯示豐富的內容，但一種方法是創建一個假文本字段 -> 在 <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>

Answer 3

如果您更喜歡使用 HTML 而不是 textarea （因為您不能在 textarea 中包含 HTML ），那么您可以將 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>

將空行替換為<p> textarea 中的標簽並將其顯示為 HTML 有效代碼

問題描述

3 個解決方案

解決方案1
1 2020-10-18 09:28:45

解決方案2
0 2020-10-18 09:28:35

解決方案3
0 2020-10-18 09:30:14

將空行替換為<p> textarea 中的標簽並將其顯示為 HTML 有效代碼

問題描述

3 個解決方案

解決方案1 1 2020-10-18 09:28:45

解決方案2 0 2020-10-18 09:28:35

解決方案3 0 2020-10-18 09:30:14

解決方案1
1 2020-10-18 09:28:45

解決方案2
0 2020-10-18 09:28:35

解決方案3
0 2020-10-18 09:30:14