I have a <textarea> which I'm appending to dynamically using JS.
I'd like to format it so the header row being appended is bold:
some previous content...
NEW HEADER ROW TO BE MADE BOLD
New additional content...
...
So the header row would essentially be wrapped in a <strong> tag.
Without punctuation and using jQuery, this works for me:
$('#textbox').change(function(){
$('#example').html($('#textbox').text().replace(/([A-Z\s]+)\n/g, "<strong>$1</strong>"))
})
In this snippet, 'textbox' is the id of the textarea and 'example' is the preview div.
css first line? http://www.w3schools.com/cssref/sel_firstline.asp
Related
I am using the wheelnav.js library. Some of the items in the wheel have text which needs to be wrapped onto a new line due to the length being too long.
I have tried using the <br /> html tag but it is rendered as text.
You have to use \n.
myWheelnav.createWheel(["Short text","This is a\nlong text"]);
I am trying to retrieve the text embedded inside the div tag. Partial html code is given below. I consulted the other existing answers, but the tag is located successfully but the text is coming back as empty string.My purpose is to retrieve the string between the 'div' tag as "You entered an invalid username or password, please try again."
I used the xpath
//div[#class='login-card js-login-card']/div[#role='alert']/div[2]
I used the css
.alert__heading.js-alert--error-text
This only getting back the tag name as div, but the text as an empty string.
Any ideas or corrections?
<div class="login-card js-login-card">
<div class="login-page__alert alert alert--error tt js-alert--error" role="alert">
<div class="alert__icon">
<div class="alert__heading js-alert--error-text">You entered an invalid username or password, please try again. </div>
</div>
<div id="cmePageWrapper" class="page-wrapper page-wrapper--card"> </div>
Try following xpath, as the required div tag is child node of div with class 'alert__icon':
//div[#class='login-card js-login-card']/div[#role='alert']/div[1]/div
Let me know, if it works for you.
Maybe you wanna try this
div[class*="error-text"]
If it didn't work try to get text by executing javascript code using this
$$( "div[class*="error-text"]" ).text() OR .val()/.html()
Good luck !
You could use contains with xpath, something like //div[contains(#class, 'error-text' ) ], using findelement will retrieve first element match the criteria. If it still returns empty, it means that the page might have more than one element which match the criteria
Given the following code, how would I verify the text within using Selenium?
<div class='my-text-block>
<p>My first paragraph of text</p>
<p>My second paragraph of text</p>
</div>
I am wanting to, in one verifyText statement to capture all the text:
My first paragraph of text
My second paragraph of text
Is it possible?
Since you've tagged this with selenium-webdriver, I'm assuming you want a code example but because you've not stated what language you're using, I'll give you a python example. It should be easy to translate that to a different language if needed.
ok(driver.find_element("class", "my-text-block").text == "What I expect it to be")
The text attribute on a WebElement object simply contains all visible text within that element and all children elements.
And some lovely docs, of course.
Hello I am trying to check if the color of an input is red.(Selenium IDE 1.9 Firefox Plugin)
If i select it with
<td>verifyAttribute</td>
<td>id=focus_me</td>
<td>*color=red*</td>
the "Find" button works, but there is no attribute selected to check.
if i change it to
<td>verifyAttribute</td>
<td>id=focus_me#color</td>
<td>*color=red*</td>
the element is not found, so how do i use it ?
Assuming we are talking about color as a style, your HTML probably looks something like:
<span id="custom1" style="color:red;">Custom Attribute 1</span>
As you can see 'color' is not an attribute. It is part of the value of the 'style' attribute.
So what you want do is verify that the 'style' attribute contains the 'color:red':
<td>verifyAttribute</td>
<td>id=focus_me#style</td>
<td>*color:*red*</td>
Note that the asterisk (*) are wildcards. They have been added in case there is another style property before or after the one of interest. One was also added between the color and red since sometimes people puts spaces and sometimes not.
I have some dijit.InlineEditBox widgets and now I need to add some search highlighting over them, so I return the results with a span with class="highlight" over the matched words. The resulting code looks like this :
<div id="title_514141" data-dojo-type="dijit.InlineEditBox"
data-dojo-props="editor:\'dijit.form.TextBox\', onFocus:titles.save_old_value,
onChange:titles.save_inline, renderAsHtml:true">Twenty Thousand Leagues <span
class="highlight">Under</span> the Sea</div>
This looks as expected, however, when I start editing the title the added span shows up. How can I make the editor remove the span added so only the text remains ?
In this particular case the titles of the books have no html in them, so some kind of full tag stripping should work, but it would be nice to find a solution (in case of short description field with a dijit.Editor widget perhaps) where the existing html is left in place and only the highlighting span is removed.
Also, if you can suggest a better way to do this (inline editing and word highlighting) please let me know.
Thank you !
How will this affect your displayed content in the editor? It rather depends on the contents you allow into the field - you will need a rich-text editor (huge footprint) to handle html correctly.
These RegExp's will trim away XML tags
this.value = this.displayNode.innerHTML.replace(/<[^>]*>/, " ").replace(/<\/[^>]*>/, '');
Here's a running example of the below code: fiddle
<div id="title_514141" data-dojo-type="dijit.InlineEditBox"
data-dojo-props="editor:\'dijit.form.TextBox\', onFocus:titles.save_old_value,
onChange:titles.save_inline, renderAsHtml:true">Twenty Thousand Leagues <span
class="highlight">Under</span> the Sea
<script type="dojo/method" event="onFocus">
this.value = this.displayNode.innerHTML.
replace(/<[^>]*>/, " ").
replace(/<\/[^>]*>/, '');
this.inherited(arguments);
</script>
</div>
The renderAsHtml attribute only trims 'off one layer', so embedded HTML will still be html afaik. With the above you should be able to 1) override the onFocus handling, 2) set the editable value yourself and 3) call 'old' onFocus method.
Alternatively (as seeing you have allready set 'titles.save_*' in props, use dojo/connect instead of dojo/method - but you need to get there first, sort of say.