Question
As mentioned in the title, how do you embed an <em> or <b> tag in a paragraph in React?
Example Output
I'd like to start with a default paragraph like so:
<p>Lorem ipsum</p>
then end up with something like:
<p>Lorem i<i>p</i>sum
My Current Workaround
I'm currently splitting the paragraph into a list of spans all containing a single character. This seems clunky and uncool... Would appreciate any help; I'm a React newcomer!
Here's the solution I used to get a satisfactory result:
const DummyComponent = ({highlightIndex}) {
let aStringVariable = "some dummy text";
const eachLetter = aStringVariable.split("");
return (
<p>
{eachLetter.map((letter, index) => {
if (index === highlightIndex){
return <em key={index}>letter</em>;
} else {
return <React.Fragment key={index}>{letter}</React.Fragment>;
}
</p>
}
Related
I have a React component which should return a <h1> with an position: absolute <div> as accent after the first word-break:
e.g. First example (accent cube positioned fine)
e.g. Second example (accent cube should be positioned right after "SIT")
Since I want to use this component for several projects and different text lengths, I am trying to find a dynamic solution rather than setting the CSS on each of the accent cubes.
Am I missing an CSS property? Or is JS necessary to recalculate the <div> after word-breaks?
Have already tried inline, etc. But the gap (between text and div) on some word-breaks still persist.
Acceptance criteria: Text comes from CMS and would like to make the component take a string without the need for special characters: e.g. |,etc. to replace with the cube div
My code so far (with Tailwind):
type IHeadingProps = {
text: string | JSX.Element;
classList?: string;
url?: string;
cube?: "small" | "base" | "large";
onClick?: () => {};
};
const Heading = ({ text, classList, cube, url, onClick }: IHeadingProps) => {
const headingClasses = classList
? classList
: "text-4xl xl:text-6xl uppercase";
let cubeDivSize;
if (cube === "small") {
cubeDivSize = "h-3 w-3 lg:h-4 lg:w-4 xl:h-5 xl:w-5";
} else if (cube === "base") {
cubeDivSize = "h-4 w-4 lg:h-5 lg:w-5 xl:h-6 xl:w-6";
} else if (cube === "large") {
cubeDivSize = "h-5 w-5 lg:h-6 lg:w-6 xl:h-7 xl:w-7";
}
const cubeDiv = (
<div
className={`absolute right-[-1rem] -top-3 rounded-sm bg-levaro-primary lg:right-[-1.5rem] lg:-top-4 xl:-top-5 xl:rounded ${cubeDivSize}`}
data-testid="accent-cube"></div>
);
if (url) {
return (
<h1 className={`${cube && "relative inline-block"} ${headingClasses}`}>
<a href={url}>
{text}
{cube && cubeDiv}
</a>
</h1>
);
} else {
return (
<h1
className={`${cube && "relative inline-block"} ${headingClasses}`}
onClick={onClick}>
{text}
{cube && cubeDiv}
</h1>
);
}
};
export default Heading;
Thanks in advance!
Having this HTML block in a React app:
<div className="my-class" title={myValue}>
<div>{myValue}</div>
</div>
The content of myValue is MyCompany™.
The inner div is showing the content correctly.
But the title, which appears when hover, replaces ™ with ™ and shows it like this: MyCompany™.
Why is this happening for the title? Is there a way to fix it?
You can use dangerouslySetInnerHTML, which is not ideal, but it is fine. So, the code should look like that:
let title = ["MyCompany", <span>™</span>]
<div className="my-class" dangerouslySetInnerHTML={{__html: title }}>
<div>{title }</div>
</div>
If your entity is dynamic, like you told me in the comments, then we can do the following trick:
const parseASCII = (string) => {
const htmlTextArea = document.createElement('textarea');
textarea.innerHTML = string;
return htmlTextArea.value;
}
I am new to jquery and was wondering how I can point one html element equal to another. I want to make it so that whenever something in the h2 tag changes, the text within the p tags will copy the change. Below is how my tags are set up within the class fc-center.
var title = $('div.fc-center h2').text();
$('.fc-center').append('<p>'+'' +'</p>');
with the html looking something like
<div class = 'fc-center'>
<h2> text text</h2>
<p> </p>
</div>
essentially what I want to do is something like this :
$('div.fc-center p').equalto $('div.fc-center h2')
But I am not quite sure how to go about it
I propose this solution:
var title = $('.fc-center').find('h2').text();
var elementsP=$('.fc-center').find('p');
if (elementsP.length > 0) {
$.each(elementsP, function(i, val) {
$(this).empty().html(title);
});
}
https://jsfiddle.net/julian9319/grc0y6qf/1/
how to highlight only the words which are invalid in input given by a user where i can make my custom invalid check function.
e.g
hello this is very good and very nice.
suppose this is the input by the user and suppose i want to highlight "very" and "this" or any other custom word.
I have tried putting html tag inside value but html does not parses inside value attribute of input tag.
Try using variable.split() in reading the input. Store it in array using loop and check for errors and highlight
You cannot simply put html tags in input. To enable "rich text" capabilities, you'll have to use the contenteditable HTML attribute, like so...
const words = [/(very)/gi, /(nice)/gi]
const highlightInput = () => {
const richInput = document.getElementById('rich-input')
let text = richInput.innerText
words.forEach(x => {
text = text.replace(x, '<span class="highlighted">$1</span>')
})
richInput.innerHTML = text
}
document.getElementById('highlight').addEventListener('click', highlightInput)
#rich-input{
border:1px solid #000;
padding: 5px;
}
.highlighted{
color:red;
text-decoration:underline;
}
<div>
<input type="button" value="Highlight!" id="highlight" />
</div>
<label>Enter your text below:</label>
<div id="rich-input" contenteditable="true">Hello this is very good and very nice</div>
I am trying to format this input Html by using HtmlAgilityPack
<p>This is <p>a nested paragraph 1</p></p>
<p>This is <p>a nested paragraph 2</p></p>
I want to obtain as result:
<p>This is a nested paragraph 1</p>
<p>This is a nested paragraph 2</p>
deleting the nested paragraph tags.
the next function deletes all p tags, but I want to preserve them in case they do not have nested p tags.
public void CleanNestedP()
{
var nodesP = HtmlDocument.DocumentNode.Descendants("p");
foreach (var item in nodesP.ToList())
{
var descendantsP = item.Descendants("p");
if (descendantsP.Any())
{
var replacement = HtmlDocument.CreateTextNode(item.InnerText);
item.ParentNode.ReplaceChild(replacement, item);
}
}
}
Any HtmlAgilityPack expert out there? thank you.