Question

我有以下字符串 Today is a beautiful day 和一个带有 start 的子字符串：3 和 end: 20 属性索引以形成 {{1} }.注意子字符串中的空格。

我想要完成的是动态呈现字符串，其子字符串以粗体显示，如下所示：

Tod是美好的一天

我想象的有点像我尝试过的那样，通过操作字符串并在其中添加 ay is a beautiful ：<b>，它只会返回一个显示 {{1} }

我还尝试返回一个带有标签之间字符串的 html 元素：Tod<b>ay is a beautiful </b> day，这使得合并单独的单词和管理空格变得过于复杂。

Answer 1

您可以创建一个 useMemo 函数来生成这样的 jsx 结构：

import { useState, useMemo } from "react";

export default function App() {
  const [text, setText] = useState("Today is a beautiful day");
  const [[start, end], setRange] = useState([3, 20]);

  const paragraph = useMemo(() => (
    <p>
      <span>{text.substring(0, start)}</span>
      <strong>{text.substring(start, end + 1)}</strong>
      <span>{text.substring(end + 1)}</span>
    </p>
  ),[text, start, end]);

  return (
    <div className="App">{paragraph}</div>
  );
}

检查 codesandbox example

Answer 2

使用 map 和 innerHTML

const str = "Today is a beautiful day";

function makeStrongDynamically(str, start, end) {
  const res = str
    .split("")
    .map((s, i) => {
      if (i === start) return `<b>${s}`;
      else if (i === end) return `${s}</b>`;
      else return s;
    })
    .join("");
  return res;
}

const innerHTML = makeStrongDynamically(str, 3, 20);
const element = document.querySelector(".str-attached");
element.innerHTML = innerHTML;

<div class="str-attached"></div>

使用 substring

const str = "Today is a beautiful day";

function makeStrongDynamically(str, start, end) {
  const before = str.substring(0, start);
  const center = str.substring(start, end + 1);
  const after = str.substring(end + 1);

  return `${before}<b>${center}</b>${after}`;
}

const innerHTML = makeStrongDynamically(str, 3, 20);
const element = document.querySelector(".str-attached");
element.innerHTML = innerHTML;

<div class="str-attached"></div>

Answer 3

你可以做这样的事情。我已经在 javascript 中做到了这一点。

const startIndex = 3;
const endIndex = 20;
const myString = 'Today is a beautiful day';

const mySubString = myString.substring(3, 20);
const startString = myString.substring(0, startIndex);
const endString = myString.substring(endIndex, myString.length)



console.log(startString + "<strong>" + mySubString + "</strong>" + endString);

如果你想在 reactjs 中渲染，那么使用下面的。

{`${startString}<strong>${mySubString}</strong>${endString}`}

如何将 html 元素添加到字符串并显示它们？

3 个答案: