为文本域（textarea）中的个别字体设置不同的样式

忘是亡心i 2023-10-03 18:37 1阅读 0赞

#### 文章目录 ####

*   *  将textarea文本域用可编辑的div来代替
     *  相关JavaScript代码
     *  效果显示
     *  参考链接

### 将textarea文本域用可编辑的div来代替 ###

将contenteditable设置为true后可将div模拟成textarea

<div id="" class="" contenteditable="true"></div>

然后就可以根据需求改变文本中个别字体的样式了

### 相关JavaScript代码 ###

var arr_correct_split = data_try.correct_result_split;
    		var arr_original_split = data_try.original_text_split;
    		var str_res = "";
            for (var i in arr_correct_split){
        
                // alert("this is "+ i);
                for (var j in arr_correct_split[i]){
        
                    // alert(arr_correct_split[i][j]);
                    if (arr_correct_split[i][j] == arr_original_split[i][j]){
        
                       str_res+=arr_correct_split[i][j];
                     }
                    else {
        
                       str_res+="<span style='background-color: yellow;color: red'>"+arr_correct_split[i][j]+"</span>";
                    }
    }

### 效果显示 ###

![在这里插入图片描述][5ab8150a8a3a43c0851a326b6c5f7d23.png]

### 参考链接 ###

[textarea怎么部分字体变颜色][textarea]

[5ab8150a8a3a43c0851a326b6c5f7d23.png]: https://img-blog.csdnimg.cn/5ab8150a8a3a43c0851a326b6c5f7d23.png
[textarea]: https://jingyan.baidu.com/article/020278112023561bcc9ce589.html

发表评论取消回复

表情：

评论列表（有 0 条评论，1人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android TextView设置个别字体样式

印象中的TextView： TextView 就是用于显示文本的控件，可以在布局文件中通过 android:text 属性设置需要现实的字符，或者通过Context对象的fi

秒速五厘米/ 2024年02月17日 17:16/ 0 赞/ 52 阅读

相关为文本域（textarea）中的个别字体设置不同的样式

文章目录将textarea文本域用可编辑的div来代替相关JavaScript代码效果显示参考链接将t

忘是亡心i/ 2023年10月03日 18:37/ 0 赞/ 2 阅读

相关 ElementUI-textarea文本域高度自适应设置的方法

一、概述 textarea默认情况下，当超出范围后，会在右边显示滑动条 ![b0773135d85317606b5e96db93fd9ee1.png][] 体验不太

àì夳堔傛蜴生んèń/ 2023年01月13日 09:17/ 0 赞/ 365 阅读

相关 html设置字体缩进,css样式设置文本，文本阴影/修饰/字体/缩进。字体类，样式，设置字体，字体变形，引用字体...

/\ 文本类 \/ /\ 文本阴影 / / text-shadow:3px 3px 3px red； \/ /\ 第一个值 X轴偏移量 (加负号为反向) 第一个

男娘i/ 2022年10月07日 09:53/ 0 赞/ 13 阅读

相关 Openlayer中给feature设置不同的样式

![20210831101738346.png][] 方式一： geojson数据： geojsonData: { type: "

àì夳堔傛蜴生んèń/ 2022年09月09日 09:28/ 0 赞/ 339 阅读

相关在html中怎么设置一行字两个不同样式的字体

Web小结 1.在html中怎么设置一行字两个不同样式的字体 ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s

刺骨的言语ヽ痛彻心扉/ 2022年08月28日 07:50/ 0 赞/ 637 阅读

相关 QComboBox设置字体样式

一、我们希望将系统的字体添加到下拉列表中，并且在工具栏中显示，效果如下图所示： ![70][] 二、单纯的用QComboBox是不能获取字体样式的，QComboBox仅仅是

Love The Way You Lie/ 2022年05月10日 05:14/ 0 赞/ 1184 阅读

相关 textarea文本域回车切换

// 回车转<br/> function getFormatCode(strValue){ return strValue.replace(/\

缺乏、安全感/ 2022年04月03日 04:48/ 0 赞/ 225 阅读

相关 idea中的一些样式和字体大小的设置

1、toolbar的勾选：勾选前： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9

本是古典何须时尚/ 2021年09月23日 00:36/ 0 赞/ 547 阅读

相关 css 字体文本相关样式

字体设置: font-size:10px; 设置字体大小其中: 自适应大小: font-size:sam

深藏阁楼爱情的钟/ 2021年07月24日 14:44/ 0 赞/ 531 阅读