We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you two Citrix podcasts. Learn about 2020 trends and get answers to your biggest Citrix questions!Listen Now

x

Decorating a innerHTML or innerText

DHamilton01
DHamilton01 asked
on
Medium Priority
1,473 Views
Last Modified: 2012-05-05
I am enumerating the elements in IE documents (C++) and searching them for phone numbers. If I find one I want to decorate it (underline), but just the phone number, which may be embeded within tags, text or other element composition.

Can any one tell me how to, essentually, take the element string apart and just decorate the middle segment (the phone number), and rewrite the whole element string back to the page? (I don't know JS, so if you can suggest syntax, it will help a lot).

I have tried 'put_innerText()' and 'put_innerHTML()' and but both return a HRESULT error value (-2146827688) when I try to 'put' the element text. I cannot tell if this is because the decoration that I am trying to apply is syntactically incorrect, the element is not 'writtable', or some other reason...

Thanks for your help

- Dick
Comment
Watch Question

CERTIFIED EXPERT
Top Expert 2004

Commented:
I am not sure what put_innerText or put_innerHTML is (some type of function?)

You should be able to just use C++ for this; a simple way (that doesn't always work in case the # is stuck in Javascript for instance), would just be to use a regular expression replacement. I'm not too sure how you're searching for your phone number; if you are using regex (not sure how it works in C++), it shouldn't be too difficult to adapt it.

Author

Commented:
Zyloch,

The 'put' functions are methods of the IHTMLElement interface.

I'm not sure how you are suggesting that this can be done. It seems that some taging or style sheet must be applied to the phone number so that it will be decorated. I am not sure what that tagging should be, nor how to replace the element containing the phone number back to the document.

I am using a function that I wrote to find numbers that are in a phone number format in the element contents.

- Dick
CERTIFIED EXPERT
Top Expert 2004

Commented:
I would think the <u></u> tag would be fine. I am not familiar with IHTMLElement; it is with C++ right? If you cannot get put_innerText() or put_innerHTML() to work right, you might get more feedback in that forum then.

Author

Commented:
Zyloch,

Actually, that helped a lot.

Can you tell me how to simularly add a tag that will cause an 'onClick' event to fire?

Thanks
CERTIFIED EXPERT
Top Expert 2004

Commented:
Depends on what the onclick is. You can try putting <span onclick="etc."></span> around it.

Author

Commented:
I mean, when the user mouse clicks the phone number (I want an event to fire...).

(Maybe I am not understanding your question...

Author

Commented:
more...

I have associated a event sink with the window (using the C++ IHTMLElement method 'pElem->put_onclick(Sink)'). This will cause an event to fire into my sink any time the user clicks (anywhere) on the element. I want issolate that click event so that it only will fire when my newly decorated phone number has been touched. I suspect that there is JS (or even HTML) that will fire into my sink. (Maybe it is defined by the other (="etc.") side of the onclick tag you note above).

What is '="etc."'. What does that tell the IE to do when the tag is clicked? Can I enter something after the equal sign that will cause it to fire into my sink?

Thanks
CERTIFIED EXPERT
Top Expert 2004

Commented:
Perhaps you can use put_innerHTML or whatever you use to put a <span> tag around the <u> tags (I would tell you to use CSS itself and put text-decoration:underline; as a style instead of <u> tags but I'm not sure how to do that with IHTMLElement). Put after you put the <span> tags, you can probably use put_onclick. The equal sign if for when you're writing HTML yourself.

Author

Commented:
Zyloch,

I am trying to find out what the 'span' tag is... it seems like it is some kind of blocking tool (ie. a means of embedding some html, with in other tagged html...(?)).

I think my problem is the syntax to bridge between the click event from JS to a C++ function call.

I have found this frament in a book on JS:

<span onmouseover=”hilite(this)” onmouseout=”revert(this)”
onclick=”go(‘...’)>...</span>

I wonder if the "go('...')" syntax could be used to go to a C++ method somehow. Usually languages will provide a means of getting to others...

(The book I have on JS, though pound-for-pound should contain everything there is know about JS, is not very easy to search for syntax and options associated with tags (etc)...!)

CERTIFIED EXPERT
Top Expert 2004
Commented:
I see what you are saying. There is no way to have the go() function in Javascript go back to a C++ method as that could be a security risk. The only way I know to do this would be using go() to use AJAX and callback to server-side code that would execute your C++ program (possibily with shell_exec() in PHP, for example) with parameters that your C++ code will use to determine what method to run.

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts

Author

Commented:
Zyloch,

Thanks for all the info. It has helped to get focused on the issues.

FYI... here is some documentation on a C++ interface method that might hold some promise, as part of the solution:

Thanks - Dick


IHTMLElement::insertAdjacentHTML Method

--------------------------------------------------------------------------------

Inserts the given HTML text into the element at the location.

Syntax

HRESULT insertAdjacentHTML(          BSTR where,
    BSTR html
);
Parameters

where
[in] BSTR that specifies where to insert the HTML text, using one of the following values:
beforeBegin
Inserts html immediately before the object.
afterBegin
Inserts html after the start of the object but before all other content in the object.
beforeEnd
Inserts html immediately before the end of the object but after all other content in the object.
afterEnd
Inserts html immediately after the end of the object.
html
[in] BSTR that specifies the HTML text to insert. The string can be a combination of text and HTML tags. This must be well-formed, valid HTML or this method will fail.
Return Value

Returns S_OK if successful, or an error value otherwise.

Remarks

If the text contains HTML tags, the method parses and formats the text as it is inserted.

You cannot insert text while the document is loading. Wait for the onload event to fire before attempting to call this method.

When using the IHTMLElement::insertAdjacentHTML method to insert script, you must include the DEFER attribute in the script element.

Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.