如何仅选择文本的某个字符并将其变为中断？答案

【问题标题】：How do I select only a certain character of text and turn it into a break?如何仅选择文本的某个字符并将其变为中断？
【发布时间】：2014-12-09 20:33:32
【问题描述】：

我会让用户在文本框中输入文本以设置为他们的标识符，但是，他们只能输入 1 行文本。我没有办法改变它。

我想添加接受文本字符串并编辑 | 字符并将其更改为 <br> 的 CSS

他们将输入的文本字符串将是这样的：1234-5678-1234 | Jim

我希望它显示如下：

1234-5678-1234
           Jim

我猜代码可能如下所示：

p:contains('|') {输入和向右浮动的代码}

【问题讨论】：

我相信您正在寻找掩蔽功能。它不能通过 css 获得。见igorescobar.github.io/jQuery-Mask-Plugin
你为什么要这样做？它会使用户看到的输入内容与他实际输入的内容不同。这听起来像可用性差：令人惊讶和困惑。
如果用户在“文本框”中输入文本，其中只能输入一行，这听起来像input 元素。那你为什么打算设计一个p 元素，<br> 有什么帮助？（input 元素的值内没有标记。）

标签： css contains

【解决方案1】：

我会将此作为评论发布，但我需要 50 个代表 :)

就是这样：你想做的事情需要 JS。你应该试试 RegExp。使用纯 CSS 无法做到这一点。

【讨论】：

这里有一个链接，展示了如何使用 RegExp 替换“|”带有<br> 的符号：js.do/code/45489 虽然不确定float:right。我还在寻找。 . .
我发布了另一个答案，可能已经解决了您的问题。

【解决方案2】：

除了空内容的特殊情况外，不能根据其文本内容选择元素。曾经（在 2001 年）有一个 draft 建议使用 :contains(...) 选择器，但随着草案的进行，此功能被删除（最终成为 Selectors Level 3 建议）。

仍然没有办法根据其内容选择元素内部的内容。

此外，无法添加<br>。您不能使用 CSS 添加标签或元素，只能通过伪元素添加文本内容。

此外，如果在input 元素中读取输入，则不能使其内容显示为两行。如果用户输入实际上是在不同的元素中回显的，例如p 元素，那么它会以编程方式复制到那里，所以问题是为什么要在那里进行更改。您可以使用 JavaScript 修改内容，将 p 元素的内容中的任何 | 替换为 <br> 会相当简单。

【讨论】：

【解决方案3】：

您应该尝试使用<div contenteditable="true"></div>。您可以通过根据需要包装和添加标签来使用 JS 来解决您的问题。此外，文本框不支持多行和格式。

关于 MDN 上的 contenteditable 属性的好读物：https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable

【讨论】：

【解决方案4】：

我做了一些测试并创建了以下正则表达式：Example Here

<input type="text" id="demo" value="123-456-7890 | John Doe" size="35">

<button onclick="myFunction()">Try it</button>

<p style="text-align:left;" id="number"></p>
<p style="text-align:right;" id="name"></p>

<script>

function myFunction() {
    var str = document.getElementById("demo").value;
    strnum = str.indexOf('|');
    var name = str.slice(strnum+1);
    var number = str.slice(0,strnum);
    document.getElementById("number").innerHTML = number;
    document.getElementById("name").innerHTML = name;
}
</script>

这是你想要的吗？

【讨论】：