【实践功能记录5】文本内容替换(字符串方法的使用)

需求描述：在一段文本中，选中部分文本进行内容替换、做标注(调整文本颜色……)

如下图，在字符串中选中一部分字段进行替换，
temp是字段，%{STRING:TEMP} 是需要替换的内容

记录一下完成功能时用到的两种方式：

一、选中内容不做限制

用户选中字段方式灵活，只要选中的内容在一定范围内都可进行替换

主要思路：

这种方式考虑到用户在使用此功能时不熟悉需求，只知道替换的字段不知道需要替换的具体内容，在字段的选择上给与用户较为灵活的方式，所以思路比较繁琐。
1.记录选中内容的起始和结束下标
2.从所有内容(字符串)中，提取所有可替换的字段内容，记录起始下标和结束下标，存放到A数组中
3.在A数组中替换并转成字符串：将用户选中的内容下标在A数组进行匹配，找得到则代表选中内容正确可进行替换，找不到则选中内容错误，给出错误提示；
4.鼠标右击事件：处理选中效果及记录需要替换的内容及下标
示例1：
用户选中softwareName字段或者是红色框中任意部分，根据下标范围判断属于可替换内容（红色部分），选中效果则自动扩大到整个红色部分，并记录起始下标和结束下标；

示例2：
如果用户选择的字段范围不属于可替换的字段范围，则给出错误提示：“请选择正确字段进行替换”

5.确定好需要替换的内容及下标后，在A数组中将需要替换的部分替换成新字段内容并更新下标，最后将数组拼接成新字符串渲染到页面上

需要考虑的问题：

1.若选中的内容在整个字符串中存在相同的字段，无法精确匹配问题：
所以不能根据字段来查找，需要根据下标确定具体的替换位置
2.因为是根据固定格式分组匹配，若存在其他内容时，替换之后下标对不上，内容会丢失

二、限制选中内容

为了解决第一种方式遗留的问题，在一开始就限制用户选中的内容，只有符合规定的格式的字段再进行替换。
选中什么就替换什么，这种方式要求用户选中的内容就是要替换的内容，限制用户选中字段必须是可替换内容从% 开头到 } 结尾
1.记录选中内容的起始下标和结束下标
2.鼠标右击事件：判断选中内容是否符合固定合适并处理选中效果
3.字符串替换方法：根据下标确定字符串中需要替换的位置进行替换

实现代码:

页面：

代码（以方式二为例）：

1.@contextmenu 鼠标右击事件，选中字段后，打开弹窗，选择替换字段；
.prevent 在该输入框下取消鼠标默认的右击事件，添加自定义事件；

// 此方式会取消整个项目的右击事件，尽量不使用此方式，采用 @contextmenu.prevent 方式
document.oncontextmenu = function(e){
	return false
	//或者 e.preventDefault()
}

2.@mouseup=“mouseSelectText” 鼠标按下抬起事件，用于选中字段后对字段的判断：判空和对格式的判断

selectionText: 存放鼠标选中的内容 window.getSelection().toString()
selectionSIndex: 鼠标选中内容的起始下标val.target.selectionStart
selectionEIndex: 鼠标选中内容的结束下标val.target.selectionEnd

3.id="inputEl" 用于dom操作，更改选中内容样式
选中输入框，使用setSelectionRange(开始下标，结束下标)方法对光标进行操作，可以通过设置起始于终止位置，来选中一段文本中的一部分；
修改文本选中样式：

::selection 伪元素是用来匹配突出显示的文本。浏览器默认鼠标选中的文本样式为 深蓝色背景，白色字体
在scope中需要加 :deep 深度选择器来修改文本选中样式

4.字符串替换


modelValue为字符串绑定的内容
stringValue 为新字段

其他字符串方法总结：

1.match() 和 matchAll()
str.match(reg); 返回一个字符串正则匹配的结果，加g返回所有匹配到的结果，不加g返回第一个匹配的字符串和其他相关信息，包括索引位置等等

将字符串以 % 和 } 划分，返回一个数组
modelValue.value.match(/%.*?}/g);

按照%{}对字符串分组, 返回的是一个迭代器，需要转为数组使用
const iteratorArr = […modelValue.value.matchAll(/%.*?}/g)];

 iteratorArr.forEach((item) => {
    state.selectionArr.push({
      field: item[0], // 字段内容
      sIndex: item['index'], // 起始下标
      eIndex: item['index'] + item[0].length, // 结束位置下标
    });
  });

2.replace()
用于在一段字符串中替换另一些字符，参数为字符串或正则表达式
注意：只会替换第一个匹配到的内容

const str = "abcdde";
str.replace('d', 'g'); // abcgde

使用正则表达式且使用全局匹配符号g，可替换掉所有匹配的上的内容

const str = "abcdde";
str.replace(/d/g, "a"); // abcaae;

3.substr() 用于字符串的截取

str.substr(参数1, 参数2); 返回被
一个参数：默认截取到末尾
0或正整数：字符串截取的起始下标；
负数：从倒数第几个字符开始截取；
两个参数
参数1：
1.为0或正整数：代表字符串截取的起始下标；
2.负数: 代表从倒数第几个字符开始截取；
参数2：
1.正整数：代表截取的个数
2.0或负数：返回空字符串

4.substring()
如果只有一个参数的情况下，和substr()的作用一样；
两个参数：substr() 第二个参数表示截取长度； substring() 第二个参数表示截取的最终下标（不包括最终下标）

str.substring(start, end);
substring 方法返回的字串包括 start 处的字符，但是不包括 end 处的字符
如果start 和 end相等，那么该方法返回的就是一个空串（也就是长度为0 的字符串）
如果start比end 大，那么该方法在提取字串之前会交换这两个参数。
如果start或者end 为负数，那么他将会被替换成0.