我希望在div标签中执行以下操作：
使用跨度,单词将以不同方式着色.
我将在文本框中给出一些文本,并通过JavaScript我需要动态更新到div以显示类似上面的内容.
做这个的最好方式是什么？
它会涉及等宽字体吗？
它会涉及写“隐藏”文本吗？
我希望以这种方式完成整个段落.
这可能看起来很奇怪,但我正在进行的研究要求我提供具有多种颜色的给定文本中的某些单词,我认为这可能是传达此信息的一种很好的方式.
更新文本框中的文本将更新以下变量,反过来我需要将这两个变量转换为类似上图的内容.
text = "I am under the text above me and there is lots more text to come./n I am even moving onto a new line since I have more text"
color_per_word_position = {0:green,1: red,2: cyan,4: yellow,5: red,...}
解决方法
你必须使用等宽字体.*
我基本上看到两个选项：1.使用空格2.边距.
选项1
你的文字看起来像
I•am•under•the•text•above ••am•under•••••text•above
其中•表示空格字符.在CSS方面非常简单,因为您不必担心间距.浏览器为您完成所有操作.示例：http://jsfiddle.net/PYXdr/
*好吧,有可能使用任何字体,使用大量的JS,但我想这不值得.
选项2
由于您可能不希望在跨度之间使用空格,因此您可能更喜欢这样：
I•am•under•the•text•above am•under text•above
现在,需要手动处理间距.每个跨度应该得到一个左边距,将其推到所需的位置.但在我们能够做到这一点之前,我们需要知道一个字符的宽度(使用JS,因为CSS没有提供).好的,非常简单：
var el = document.createElement('pre');
el.style.display = 'inline-block';
el.innerHTML = ' ';
document.body.appendChild(el);
var width = parseFloat(getComputedStyle(el).width);
document.body.removeChild(el);
现在让我们继续前进并移动跨度：
span1.style.marginLeft = (2 * width) + 'px'; span2.style.marginLeft = (5 * width) + 'px';
把它们放在一起
现在,这是一个如何工作的基本示例：
var text = "I am under the text above me and there is lots more text to come.\nI am even moving onto a new line since I have more text"
var highlightBorders = [[2,3,4,6],[6,7]]; // YOUR TASK: implement the logic to display the following lines
var color_per_word_position = {0:'lime',1: 'red',2: 'cyan',3:'orange',4: 'yellow',5: 'red'}
/* generate CSS */
var style = document.createElement('style');
for (var i in color_per_word_position) {
style.innerHTML += '.hl' + i + '{background:' + color_per_word_position[i] + '}';
}
document.head.appendChild(style);
/* generating the text */
text = text.split('\n');
var pre = document.createElement('pre');
text.forEach(function (line,i) {
var div = document.createElement('div');
var words = line.split(' ');
var result = [];
highlightBorders[i].forEach(function (len,j) {
var span = document.createElement('span');
span.innerHTML = words.splice(0,len).join(' ');
span.className = 'hl' + j;
if (j) {
span.style.marginLeft = width + 'px' // YOUR TASK: implement the logic
}
div.appendChild(span);
});
pre.appendChild(div);
});
document.body.appendChild(pre);
这不是一个完整的解决方案,因为a)我真的没有看到你要突出的部分和b)我不想破坏所有的乐趣.但是你明白了.
