如何在这个自定义javascript函数中使用link而不是string？

hsvhsicv 于 2023-04-04 发布在 Java

关注(0)|答案(2)|浏览(99)

我有一个帮助函数来替换字符串中的参数，参数提供-

type FormatStringParameter = string | number;

/**
 * Temporary function to replace params in a string with the params provided
 *
 * @param input The string that has params i.e. {0}, {1}...
 * @param params An array of strings representing the params
 */
export function formatString(input: string, ...params: FormatStringParameter[]): string {
  if (params && params.length) {
    for (let i = 0; i < params.length; ++i) {
      input = input && input.replace(`{${i}}`, params[i] as string);
    }
  }

  return input;
}

字符串变量包括：

const str = "Hello World! {0}"
const linkText = "Click Here!"

如何使用formatString函数显示text = Hello World! Click Here!，并将“Click Here！”作为链接（非纯文本）
我尝试了const outputText = formatString(str, linkText);，但是由于formatString函数只接受字符串作为输入，所以我得到了一个错误。

JavaScript

来源：https://stackoverflow.com/questions/75901463/how-to-use-link-instead-of-string-in-this-custom-javascript-function

2条答案

按热度按时间

ki0zmccv1#

这可不容易。
最困难的部分是将字符串input拆分为字符串和链接的列表，并可能确定单个param应该是链接还是普通文本。
formatString需要导出DOM节点或DOM节点数组，而不是字符串。
但是调用formatString的代码也需要能够处理DOM节点，所以只修复formatString是不够的。
创建DOM链接的快速（不完整）示例：

function formatString( input, ...params ){
    const result = [];
    for( let i = 0; i < params.length; ++i ){
        if( shouldBeLink ){
            const element = document.createElement('a');
            element.appendChild( document.createTextNode( params[i] ))
            result.push( element );
        } else if( ... ){
        ...
    }

    return result;
}

为完整起见：React也允许你直接将HTML代码写入元素（包括链接），但这是危险的，你不应该这样做。这就是为什么它被称为'dangerouslySetInnerHTML'。

赞(0）回复(0）举报 2023-04-04

nx7onnlm2#

两个观察结果**：**

如何识别params数组中的元素是链接还是纯文本？
在点击用户将得到重定向？在哪里是link URL给定？

如果你把所有的元素都作为params数组中的一个链接，那么你可以简单地用HTML中的<a>标签替换它们。

function formatString(input: string, ...params: string[]) {
  console.log(params);
  if (params && params.length) {
    for (let i = 0; i < params.length; i++) {
      input = input && input.replace(`{${i}}`, `<a href="#">${params[i]}</a>`);
    }
  }
  document.getElementById('result').innerHTML = input;
}

const str = "Hello World! {0}"
const linkText = "Click Here!"

formatString(str, linkText);

<div id="result"></div>

赞(0）回复(0）举报 2023-04-04

我来回答

如何在这个自定义javascript函数中使用link而不是string？

2条答案

相关问题

热门标签

最新问答