如何在不修改html内容的情况下，为特定部分的文字加高亮？

Question

比如有如下一段代码：

<p>我是第一段</p>
<p>我是第二段</p>
<p>我是第三段</p>

我从后端获取了数据，告知我要将第二个p标签内的后三个字符进行高亮，就是类似划个荧光黄线那样。
我知道可以通过定位，然后加span标签的形式去做。
但是现在这种形式不行，我们希望压根不要修改这段html代码？

请问还有什么方式可以实现这样的效果？
多谢

Answer 1

样式是CSS控制，你总得让CSS选择到你要改变样式的地方，一端纯文字不加任何辅助的标签，怎么选择到其中的某些字符？

Answer 2

定位，你想多了。。。
定位怎么写，绝对定位？怎么找到你要的那个P，如果让你给整个页面所有的P都这样做呢

Answer 3

css应该没有伪元素能够选择任意的字符。
如果把每一个字符都加上标签的话，应该可以用nth伪类来完成你要的效果。

Answer 4

让后端给一个标识符，让你可以直接css选择

Answer 5

没有，谢谢。

Answer 6

但是现在这种形式不行，我们希望压根不要修改这段html代码？

就是说通过JS修改html代码，都不可以吗？如果这个都禁止的话，那么我还真没有办法了

Answer 7

用正则匹配到高亮的字符替换成带html标签的同样字符，用css控制

Answer 8

学习了很多，不知道接下来我能不能搞定技术的

Answer 9

::before
::after

Answer 10

是不是取出来的数据是html的形式也就是富文本，你能确定数据就这三个p标签。如果可以确定，用js处理就是比较麻烦。我觉得有点得不偿失

Answer 11

两种办法
1.使用正则表达式去匹配你想要的内容，为该内容加上标签后重新渲染到html中
2.直接让后端把你想渲染的内容用标签标记好。

Answer 12

其实用伪类很好搞定的，但是jquery无法选择到伪类:after，:before,不能通过js控制伪类的CSS,那只能给p加类名了，
css:

p.active:after{
      content:'';
      display:inline-block;
      position: relative;
      top:-5px;
      border:1px solid red;
      width:48px;
      margin-left:-48px;
    } 

jquery:

$('p:nth-child(2)').addClass('active')

横线的宽度：width和margin-left是一样的，margin-left取负值,大小是字的个数×字体大小(3×16px)
横线的位置：通过top值可以调节
在线实例：
http://jsbin.com/puwupuhiwa/1...

Answer 13

不改变 HTML 的情况下加高亮！！！！

var a = 1;

这问题就像：请你在不对 a 赋值的情况下，让 a 等于 2。

解决方法就是，用一支荧光笔在屏幕上画，想亮哪段亮哪段，就不会改变 HTML。

页面的所有展示都是通过 HTML 来表现的。

退一步，你可以用 javascript 在你需要高亮的地方给他增加一个预设的 class。