打印元素双的第一个单词

Question

如何从print中获得一些已知的东西：获取元素的第一个单词（p，h1，h2或其他），复制它并以不同的方式设置它（在我的例子中，给它一点偏移和另一种颜色，所以这两个词重叠）？是否有一种只使用CSS的方式来执行此操作或可能使用jQuery或类似的东西？

由于它是CMS驱动的，没有办法手动插入跨度或类似的世界，它当然也会影响SEO ...

提前致谢！

Answer 1

这是一个纯粹的JavaScript解决方案。它确实增加了一个跨度，但是这会影响搜索引擎优化而不是复制一个单词（可能被标记为黑帽练习，因为你复制的内容可以被屏幕阅读器读取）

JSfiddle

HTML：

<p id="paragraph">This is a sentence</p>

使用Javascript：

// grabs the #paragraph element
var string = document.getElementById('paragraph');

//grabs the content of the #paragraph element
var stringContent = string.innerHTML;

//pushes the string content into an array
var stringArray = stringContent.split(" ");

//wraps the first word in a span
stringArray[0] = '<span class="first-word">' + stringArray[0] + '</span>';

//pushes the array back into stringContent
stringContent = stringArray.join(' ');

//pushes stringContent back into your html
string.innerHTML = stringContent;