用 <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 【问题描述】:有一个文本区域,有人可以在其中编写文本。文本可能在多行,我想检查文本中的空白行并用<p>
标签替换它们,所以2个空白行之间的文本应该用<p>
标签包裹。
到目前为止,它正在检查空行并在有空行时返回布尔值。
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 输入的每个部分都包含在 <p>...</p>
标签中 - 带有 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 有效代码的主要内容,如果未能解决你的问题,请参考以下文章